// src/screens/main/VoiceScreen.tsx
import React, { useState, useRef, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  ActivityIndicator,
  Modal,
  Alert,
  Animated,
  Platform,
  PermissionsAndroid,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AudioRecorderPlayer from 'react-native-nitro-sound';
import RNFS from 'react-native-fs';
import LinearGradient from 'react-native-linear-gradient';
import Clipboard from '@react-native-clipboard/clipboard';
import Toast from 'react-native-toast-message';
import { useSelector } from 'react-redux';
import { RootState } from '../../store/store';
import aiService from '../../services/aiService';
import fileService from '../../services/fileService';
import { VoiceRecord } from '../../types';
import {
  AudioEncoderAndroidType,
  AudioSourceAndroidType,
  AVEncoderAudioQualityIOSType,
  AVEncodingOption,
} from 'react-native-nitro-sound';


const audioRecorderPlayer = AudioRecorderPlayer;

const VoiceScreen: React.FC = () => {
  const { subscription } = useSelector((state: RootState) => state.subscription);

  // 状态管理
  const [isRecording, setIsRecording] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  const [recordTime, setRecordTime] = useState('00:00');
  const [recordSecs, setRecordSecs] = useState(0);
  const [audioPath, setAudioPath] = useState('');
  const [transcript, setTranscript] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState('zh-CN');
  const [showLanguagePicker, setShowLanguagePicker] = useState(false);
  const [history, setHistory] = useState<VoiceRecord[]>([]);
  const [showHistory, setShowHistory] = useState(false);

  // 动画值
  const pulseAnim = useRef(new Animated.Value(1)).current;
  const waveAnim = useRef(new Animated.Value(0)).current;
  const fadeAnim = useRef(new Animated.Value(0)).current;

  // 支持的语言
  const languages = [
    { code: 'zh-CN', name: '中文', flag: '🇨🇳' },
    { code: 'en-US', name: '英语', flag: '🇺🇸' },
    { code: 'ja-JP', name: '日语', flag: '🇯🇵' },
    { code: 'ko-KR', name: '韩语', flag: '🇰🇷' },
    { code: 'fr-FR', name: '法语', flag: '🇫🇷' },
    { code: 'de-DE', name: '德语', flag: '🇩🇪' },
    { code: 'es-ES', name: '西班牙语', flag: '🇪🇸' },
    { code: 'ru-RU', name: '俄语', flag: '🇷🇺' },
    { code: 'auto', name: '自动检测', flag: '🌐' },
  ];

  useEffect(() => {
    loadHistory();
    return () => {
      audioRecorderPlayer.removeRecordBackListener();
    };
  }, []);

  useEffect(() => {
    if (isRecording && !isPaused) {
      // 录制动画
      Animated.loop(
        Animated.sequence([
          Animated.timing(pulseAnim, {
            toValue: 1.2,
            duration: 1000,
            useNativeDriver: true,
          }),
          Animated.timing(pulseAnim, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true,
          }),
        ])
      ).start();

      // 波纹动画
      Animated.loop(
        Animated.sequence([
          Animated.timing(waveAnim, {
            toValue: 1,
            duration: 2000,
            useNativeDriver: true,
          }),
          Animated.timing(waveAnim, {
            toValue: 0,
            duration: 0,
            useNativeDriver: true,
          }),
        ])
      ).start();
    } else {
      pulseAnim.setValue(1);
      waveAnim.setValue(0);
    }
  }, [isRecording, isPaused]);

  const loadHistory = async () => {
    try {
      const historyData = await aiService.getVoiceHistory();
      setHistory(historyData.records);
    } catch (error) {
      console.error('Load history error:', error);
    }
  };

  const requestPermissions = async () => {
    if (Platform.OS === 'android') {
      try {
        const grants = await PermissionsAndroid.requestMultiple([
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        ]);

        const allGranted = Object.values(grants).every(
          result => result === PermissionsAndroid.RESULTS.GRANTED
        );

        if (!allGranted) {
          Alert.alert('权限提醒', '需要麦克风权限才能录音');
          return false;
        }
        return true;
      } catch (err) {
        console.warn(err);
        return false;
      }
    }
    return true;
  };

  const startRecording = async () => {
    const hasPermission = await requestPermissions();
    if (!hasPermission) return;

    const path = Platform.select({
      ios: `${RNFS.DocumentDirectoryPath}/audio_${Date.now()}.m4a`,
      android: `${RNFS.ExternalDirectoryPath}/audio_${Date.now()}.mp3`,
    });

    const audioSet = {
      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
      AudioSourceAndroid: AudioSourceAndroidType.MIC,
      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
      AVNumberOfChannelsKeyIOS: 2,
      AVFormatIDKeyIOS: "aac" as AVEncodingOption,
    };

    try {
      const result = await audioRecorderPlayer.startRecorder(path, audioSet);
      audioRecorderPlayer.addRecordBackListener((e) => {
        setRecordSecs(Math.floor(e.currentPosition / 1000));
        setRecordTime(audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)));

        // 检查录音时长限制
        const maxDuration = getMaxRecordingDuration();
        if (Math.floor(e.currentPosition / 1000) >= maxDuration) {
          stopRecording();
          Toast.show({
            type: 'info',
            text1: '录音时长已达上限',
            text2: `最长录制 ${maxDuration} 秒`,
          });
        }
      });

      setAudioPath(result);
      setIsRecording(true);
      setTranscript('');

      // 显示录制状态
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }).start();

      Toast.show({
        type: 'success',
        text1: '开始录音',
      });
    } catch (error) {
      console.error('Start record error:', error);
      Toast.show({
        type: 'error',
        text1: '录音启动失败',
      });
    }
  };

  const pauseRecording = async () => {
    try {
      await audioRecorderPlayer.pauseRecorder();
      setIsPaused(true);
    } catch (error) {
      console.error('Pause record error:', error);
    }
  };

  const resumeRecording = async () => {
    try {
      await audioRecorderPlayer.resumeRecorder();
      setIsPaused(false);
    } catch (error) {
      console.error('Resume record error:', error);
    }
  };

  const stopRecording = async () => {
    try {
      const result = await audioRecorderPlayer.stopRecorder();
      audioRecorderPlayer.removeRecordBackListener();

      setIsRecording(false);
      setIsPaused(false);

      // 淡出动画
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }).start();

      if (recordSecs > 0) {
        processAudio(result);
      } else {
        Toast.show({
          type: 'error',
          text1: '录音时间太短',
        });
      }

      setRecordTime('00:00');
      setRecordSecs(0);
    } catch (error) {
      console.error('Stop record error:', error);
    }
  };

  const processAudio = async (audioPath: string) => {
    setIsProcessing(true);

    try {
      // 上传音频文件
      const audioUrl = await fileService.uploadAudio(audioPath);

      // 语音转文字
      const response = await aiService.voiceToText({
        audioUrl: audioUrl,
        language: selectedLanguage === 'auto' ? undefined : selectedLanguage
      });

      setTranscript(response.text);

      // 添加到历史记录
      const record: VoiceRecord = {
        id: Date.now().toString(),
        audioUrl,
        transcript: response.text,
        duration: recordSecs,
        timestamp: new Date(),
      };

      setHistory(prev => [record, ...prev.slice(0, 9)]);

      Toast.show({
        type: 'success',
        text1: '识别成功',
        text2: `识别准确率: ${Math.round((response.confidence || 0.95) * 100)}%`,
      });
    } catch (error: any) {
      Toast.show({
        type: 'error',
        text1: '识别失败',
        text2: error.message || '请检查网络连接',
      });
    } finally {
      setIsProcessing(false);
    }
  };

  const getMaxRecordingDuration = () => {
    switch (subscription?.plan) {
      case 'PREMIUM':
        return 300; // 5分钟
      case 'BASIC':
        return 120; // 2分钟
      default:
        return 60; // 1分钟
    }
  };

  const handleCopy = () => {
    if (transcript) {
      Clipboard.setString(transcript);
      Toast.show({
        type: 'success',
        text1: '已复制到剪贴板',
      });
    }
  };

  const handleClear = () => {
    Alert.alert(
      '清空文本',
      '确定要清空识别结果吗？',
      [
        { text: '取消', style: 'cancel' },
        {
          text: '确定',
          onPress: () => {
            setTranscript('');
            setAudioPath('');
          }
        },
      ]
    );
  };

  const handleHistorySelect = (item: VoiceRecord) => {
    setTranscript(item.transcript);
    setShowHistory(false);
  };

  const formatDuration = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <View style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Language Selector */}
        <View style={styles.languageSection}>
          <Text style={styles.sectionTitle}>识别语言</Text>
          <TouchableOpacity
            style={styles.languageSelector}
            onPress={() => setShowLanguagePicker(true)}
          >
            <Text style={styles.languageFlag}>
              {languages.find(l => l.code === selectedLanguage)?.flag}
            </Text>
            <Text style={styles.languageName}>
              {languages.find(l => l.code === selectedLanguage)?.name}
            </Text>
            <Icon name="arrow-drop-down" size={24} color="#667eea" />
          </TouchableOpacity>
        </View>

        {/* Recording Section */}
        <View style={styles.recordingSection}>
          {!isRecording && !transcript && (
            <View style={styles.introSection}>
              <Icon name="mic-none" size={60} color="#ddd" />
              <Text style={styles.introTitle}>语音转文字</Text>
              <Text style={styles.introText}>
                点击下方按钮开始录音{'\n'}
                AI会将您的语音转换为文字
              </Text>
              <View style={styles.features}>
                <View style={styles.featureItem}>
                  <Icon name="check-circle" size={16} color="#667eea" />
                  <Text style={styles.featureText}>支持多种语言</Text>
                </View>
                <View style={styles.featureItem}>
                  <Icon name="check-circle" size={16} color="#667eea" />
                  <Text style={styles.featureText}>准确率高达98%</Text>
                </View>
                <View style={styles.featureItem}>
                  <Icon name="check-circle" size={16} color="#667eea" />
                  <Text style={styles.featureText}>
                    最长录制{getMaxRecordingDuration()}秒
                  </Text>
                </View>
              </View>
            </View>
          )}

          {/* Recording Animation */}
          {isRecording && (
            <Animated.View
              style={[
                styles.recordingAnimation,
                { opacity: fadeAnim }
              ]}
            >
              <Animated.View
                style={[
                  styles.waveCircle,
                  {
                    transform: [{ scale: waveAnim }],
                    opacity: waveAnim.interpolate({
                      inputRange: [0, 1],
                      outputRange: [1, 0],
                    }),
                  },
                ]}
              />
              <Animated.View
                style={[
                  styles.pulseCircle,
                  {
                    transform: [{ scale: pulseAnim }],
                  },
                ]}
              >
                <Icon name="mic" size={40} color="#fff" />
              </Animated.View>
              <Text style={styles.recordingTime}>{recordTime}</Text>
              <Text style={styles.recordingHint}>
                {isPaused ? '录音已暂停' : '正在录音...'}
              </Text>
            </Animated.View>
          )}

          {/* Transcript Result */}
          {transcript && !isRecording && (
            <View style={styles.resultSection}>
              <View style={styles.resultHeader}>
                <Text style={styles.resultTitle}>识别结果</Text>
                <View style={styles.resultActions}>
                  <TouchableOpacity onPress={handleCopy} style={styles.actionButton}>
                    <Icon name="content-copy" size={20} color="#667eea" />
                  </TouchableOpacity>
                  <TouchableOpacity onPress={handleClear} style={styles.actionButton}>
                    <Icon name="clear" size={20} color="#999" />
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.actionButton}>
                    <Icon name="share" size={20} color="#667eea" />
                  </TouchableOpacity>
                </View>
              </View>
              <ScrollView style={styles.transcriptContainer}>
                <Text style={styles.transcriptText} selectable>
                  {transcript}
                </Text>
              </ScrollView>
              <View style={styles.resultFooter}>
                <TouchableOpacity style={styles.editButton}>
                  <Icon name="edit" size={16} color="#667eea" />
                  <Text style={styles.editButtonText}>编辑文本</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.translateButton}>
                  <Icon name="translate" size={16} color="#667eea" />
                  <Text style={styles.translateButtonText}>翻译</Text>
                </TouchableOpacity>
              </View>
            </View>
          )}

          {/* Processing */}
          {isProcessing && (
            <View style={styles.processingContainer}>
              <ActivityIndicator size="large" color="#667eea" />
              <Text style={styles.processingText}>正在识别语音...</Text>
              <Text style={styles.processingHint}>请稍候，AI正在处理您的录音</Text>
            </View>
          )}
        </View>

        {/* Control Buttons */}
        <View style={styles.controlSection}>
          {!isRecording ? (
            <TouchableOpacity onPress={startRecording} disabled={isProcessing}>
              <LinearGradient
                colors={['#667eea', '#764ba2']}
                style={styles.recordButton}
              >
                <Icon name="mic" size={32} color="#fff" />
                <Text style={styles.recordButtonText}>开始录音</Text>
              </LinearGradient>
            </TouchableOpacity>
          ) : (
            <View style={styles.recordingControls}>
              {!isPaused ? (
                <TouchableOpacity onPress={pauseRecording} style={styles.controlButton}>
                  <Icon name="pause" size={28} color="#667eea" />
                  <Text style={styles.controlButtonText}>暂停</Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity onPress={resumeRecording} style={styles.controlButton}>
                  <Icon name="play-arrow" size={28} color="#667eea" />
                  <Text style={styles.controlButtonText}>继续</Text>
                </TouchableOpacity>
              )}
              <TouchableOpacity onPress={stopRecording} style={styles.stopButton}>
                <LinearGradient
                  colors={['#ff6b6b', '#ff8e53']}
                  style={styles.stopButtonGradient}
                >
                  <Icon name="stop" size={32} color="#fff" />
                  <Text style={styles.stopButtonText}>停止</Text>
                </LinearGradient>
              </TouchableOpacity>
            </View>
          )}
        </View>

        {/* Quick Actions */}
        <View style={styles.quickActions}>
          <TouchableOpacity style={styles.quickActionItem}>
            <Icon name="folder-open" size={24} color="#667eea" />
            <Text style={styles.quickActionText}>导入音频</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.quickActionItem}
            onPress={() => setShowHistory(true)}
          >
            <Icon name="history" size={24} color="#667eea" />
            <Text style={styles.quickActionText}>历史记录</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.quickActionItem}>
            <Icon name="settings" size={24} color="#667eea" />
            <Text style={styles.quickActionText}>设置</Text>
          </TouchableOpacity>
        </View>

        {/* Usage Stats */}
        <View style={styles.statsSection}>
          <Text style={styles.statsTitle}>今日使用情况</Text>
          <View style={styles.statsContent}>
            <View style={styles.statItem}>
              <Text style={styles.statValue}>5</Text>
              <Text style={styles.statLabel}>识别次数</Text>
            </View>
            <View style={styles.statDivider} />
            <View style={styles.statItem}>
              <Text style={styles.statValue}>12:30</Text>
              <Text style={styles.statLabel}>总时长</Text>
            </View>
            <View style={styles.statDivider} />
            <View style={styles.statItem}>
              <Text style={styles.statValue}>95%</Text>
              <Text style={styles.statLabel}>准确率</Text>
            </View>
          </View>
        </View>
      </ScrollView>

      {/* Language Picker Modal */}
      <Modal
        visible={showLanguagePicker}
        transparent
        animationType="slide"
        onRequestClose={() => setShowLanguagePicker(false)}
      >
        <TouchableOpacity
          style={styles.modalOverlay}
          activeOpacity={1}
          onPress={() => setShowLanguagePicker(false)}
        >
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>选择识别语言</Text>
            {languages.map((lang) => (
              <TouchableOpacity
                key={lang.code}
                style={[
                  styles.languageOption,
                  selectedLanguage === lang.code && styles.languageOptionSelected
                ]}
                onPress={() => {
                  setSelectedLanguage(lang.code);
                  setShowLanguagePicker(false);
                }}
              >
                <Text style={styles.languageOptionFlag}>{lang.flag}</Text>
                <Text style={[
                  styles.languageOptionName,
                  selectedLanguage === lang.code && styles.languageOptionNameSelected
                ]}>
                  {lang.name}
                </Text>
                {selectedLanguage === lang.code && (
                  <Icon name="check" size={20} color="#667eea" />
                )}
              </TouchableOpacity>
            ))}
          </View>
        </TouchableOpacity>
      </Modal>

      {/* History Modal */}
      <Modal
        visible={showHistory}
        transparent
        animationType="slide"
        onRequestClose={() => setShowHistory(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.historyModal}>
            <View style={styles.historyHeader}>
              <Text style={styles.historyTitle}>历史记录</Text>
              <TouchableOpacity onPress={() => setShowHistory(false)}>
                <Icon name="close" size={24} color="#666" />
              </TouchableOpacity>
            </View>
            <ScrollView style={styles.historyList}>
              {history.length > 0 ? (
                history.map((item) => (
                  <TouchableOpacity
                    key={item.id}
                    style={styles.historyItem}
                    onPress={() => handleHistorySelect(item)}
                  >
                    <Icon name="mic" size={20} color="#667eea" />
                    <View style={styles.historyContent}>
                      <Text style={styles.historyText} numberOfLines={2}>
                        {item.transcript}
                      </Text>
                      <View style={styles.historyMeta}>
                        <Text style={styles.historyTime}>
                          {new Date(item.timestamp).toLocaleString('zh-CN')}
                        </Text>
                        <Text style={styles.historyDuration}>
                          时长: {formatDuration(item.duration)}
                        </Text>
                      </View>
                    </View>
                  </TouchableOpacity>
                ))
              ) : (
                <View style={styles.emptyHistory}>
                  <Icon name="history" size={48} color="#ddd" />
                  <Text style={styles.emptyHistoryText}>暂无历史记录</Text>
                </View>
              )}
            </ScrollView>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  scrollContent: {
    paddingBottom: 30,
  },
  // 语言选择区
  languageSection: {
    backgroundColor: '#fff',
    padding: 20,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#e9ecef',
  },
  sectionTitle: {
    fontSize: 14,
    color: '#6c757d',
    marginBottom: 10,
    fontWeight: '600',
  },
  languageSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 15,
    backgroundColor: '#f1f3f5',
    borderRadius: 12,
  },
  languageFlag: {
    fontSize: 22,
    marginRight: 12,
  },
  languageName: {
    flex: 1,
    fontSize: 16,
    color: '#343a40',
    fontWeight: '500',
  },
  // 录音主区域
  recordingSection: {
    backgroundColor: '#fff',
    minHeight: 320,
    justifyContent: 'center',
    padding: 20,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#e9ecef',
  },
  introSection: {
    alignItems: 'center',
    paddingVertical: 30,
  },
  introTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#212529',
    marginTop: 20,
    marginBottom: 8,
  },
  introText: {
    fontSize: 15,
    color: '#6c757d',
    textAlign: 'center',
    marginTop: 10,
    lineHeight: 22,
  },
  features: {
    marginTop: 30,
    alignItems: 'flex-start',
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  featureText: {
    fontSize: 14,
    color: '#495057',
    marginLeft: 10,
  },
  // 录音动画
  recordingAnimation: {
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 280,
  },
  waveCircle: {
    position: 'absolute',
    width: 150,
    height: 150,
    borderRadius: 75,
    backgroundColor: 'rgba(102, 126, 234, 0.3)',
  },
  pulseCircle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#667eea',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#667eea',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 5,
    elevation: 8,
  },
  recordingTime: {
    fontSize: 36,
    fontWeight: '600',
    color: '#343a40',
    marginTop: 35,
    fontVariant: ['tabular-nums'], // 等宽数字
  },
  recordingHint: {
    fontSize: 15,
    color: '#6c757d',
    marginTop: 10,
  },
  // 结果区
  resultSection: {
    backgroundColor: '#f8f9fa',
    borderRadius: 12,
    padding: 15,
    borderWidth: 1,
    borderColor: '#e9ecef',
  },
  resultHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
    paddingHorizontal: 5,
  },
  resultTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#343a40',
  },
  resultActions: {
    flexDirection: 'row',
  },
  actionButton: {
    padding: 5,
    marginLeft: 15,
  },
  transcriptContainer: {
    maxHeight: 200,
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    borderWidth: 1,
    borderColor: '#dee2e6',
  },
  transcriptText: {
    fontSize: 16,
    color: '#212529',
    lineHeight: 26,
  },
  resultFooter: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 15,
    gap: 15,
  },
  editButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 15,
    backgroundColor: '#e7e7ff',
    borderRadius: 20,
  },
  editButtonText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#667eea',
    marginLeft: 5,
  },
  translateButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 15,
    backgroundColor: '#e7e7ff',
    borderRadius: 20,
  },
  translateButtonText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#667eea',
    marginLeft: 5,
  },
  // 处理中
  processingContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 280,
  },
  processingText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#343a40',
    marginTop: 20,
  },
  processingHint: {
    fontSize: 14,
    color: '#6c757d',
    marginTop: 10,
  },
  // 控制按钮区
  controlSection: {
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  recordButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 18,
    borderRadius: 35,
    shadowColor: '#667eea',
    shadowOffset: { width: 0, height: 5 },
    shadowOpacity: 0.35,
    shadowRadius: 8,
    elevation: 10,
  },
  recordButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    marginLeft: 10,
  },
  recordingControls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  controlButton: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 100,
    height: 60,
  },
  controlButtonText: {
    fontSize: 14,
    color: '#667eea',
    marginTop: 5,
    fontWeight: '500',
  },
  stopButton: {
    borderRadius: 35,
    overflow: 'hidden',
    shadowColor: '#ff6b6b',
    shadowOffset: { width: 0, height: 5 },
    shadowOpacity: 0.35,
    shadowRadius: 8,
    elevation: 10,
  },
  stopButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 18,
    paddingHorizontal: 35,
  },
  stopButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    marginLeft: 10,
  },
  quickActions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 20,
    backgroundColor: '#fff',
    marginVertical: 10,
  },
  quickActionItem: {
    alignItems: 'center',
  },
  quickActionText: {
    fontSize: 12,
    color: '#666',
    marginTop: 5,
  },
  statsSection: {
    backgroundColor: '#fff',
    padding: 20,
    marginTop: 10,
  },
  statsTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 15,
  },
  statsContent: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#f8f9fa',
    borderRadius: 10,
    paddingVertical: 15,
  },
  statItem: {
    alignItems: 'center',
    flex: 1,
  },
  statValue: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#667eea',
  },
  statLabel: {
    fontSize: 12,
    color: '#666',
    marginTop: 5,
  },
  statDivider: {
    width: 1,
    height: 30,
    backgroundColor: '#e0e0e0',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
    paddingBottom: 30,
    maxHeight: '70%',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
    textAlign: 'center',
  },
  languageOption: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderRadius: 10,
    marginBottom: 10,
    backgroundColor: '#f8f9fa',
  },
  languageOptionSelected: {
    backgroundColor: '#f0f0ff',
    borderWidth: 1,
    borderColor: '#667eea',
  },
  languageOptionFlag: {
    fontSize: 24,
    marginRight: 15,
  },
  languageOptionName: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  languageOptionNameSelected: {
    color: '#667eea',
    fontWeight: '600',
  },
  historyModal: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    height: '80%',
    marginTop: 'auto',
  },
  historyHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  historyTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  historyList: {
    flex: 1,
    padding: 15,
  },
  historyItem: {
    flexDirection: 'row',
    padding: 15,
    backgroundColor: '#f8f9fa',
    borderRadius: 10,
    marginBottom: 10,
  },
  historyContent: {
    flex: 1,
    marginLeft: 15,
  },
  historyText: {
    fontSize: 14,
    color: '#333',
    lineHeight: 20,
  },
  historyMeta: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 5,
  },
  historyTime: {
    fontSize: 12,
    color: '#999',
  },
  historyDuration: {
    fontSize: 12,
    color: '#999',
  },
  emptyHistory: {
    alignItems: 'center',
    paddingVertical: 50,
  },
  emptyHistoryText: {
    fontSize: 14,
    color: '#999',
    marginTop: 15,
  },
});

export default VoiceScreen;